<template>
<div class="atd-add-attendance-group atd-page">
  <div class="atd-add-attendance-group__header">
    <v-breadcrumb separator="/">
      <v-breadcrumb-item :to="{name: 'lightApp'}">轻应用管理</v-breadcrumb-item>
      <v-breadcrumb-item>{{isEdit ? '编辑轻应用' : '添加轻应用'}}</v-breadcrumb-item>
    </v-breadcrumb>
  </div>
  <div class="atd-add-attendance-group__container">
    <v-form ref="form" :model="lightApp" label-width="100px">
      <!-- <v-form-item label="泛微应用id:">
        <v-input v-model="lightApp.appId" placeholder="请输入泛微应用id，用|分隔" style="width: 300px;"></v-input>
      </v-form-item> -->
      <v-form-item label="轻应用名称:">
        <v-input v-model="lightApp.name" placeholder="请输入WP轻应用名称" style="width: 300px;"></v-input>
      </v-form-item>
      <v-form-item label="key:">
        <v-input v-model="lightApp.clientId" placeholder="请输入WP轻应用key" style="width: 300px;"></v-input>
      </v-form-item>
      <v-form-item label="secret:">
        <v-input v-model="lightApp.clientSecret" placeholder="请输入WP轻应用secret" style="width: 300px;"></v-input>
      </v-form-item>
      <!-- <v-form-item label="消息推送:">
        <span class="help-link" @click="handleOpenApiExample">
          示例
        </span>
      </v-form-item> -->
      <v-form-item>
        <v-button @click="handleSubmit">保存</v-button>
      </v-form-item>
    </v-form>
  </div>
  <api-example ref="apiExample"></api-example>
</div>
</template>

<script>
import { saveLightApp, getLightAppById, updateLightAppById} from '@/api/light_app';
import { clone, fixScheduleTime,  fetchSuccess,  tagType, swapItems} from '@/utils/tools';
import ApiExample from './ApiExample';

export default {
  name: 'atd-add-light-app',
  data() {
    return {
      lightApp: {
        name: '',
      },
      isEdit: false,
      cached: {},
    };
  },
  computed: {

  },
  mounted() {
    const {
      id
    } = this.$route.params;
    if (id) {
      this.isEdit = true;
      getLightAppById(id).then((res) => {
        if (fetchSuccess(res)) {
          this.lightApp = res.results;

          this.cached = clone(this.lightApp);
        }
      });
    }
  },
  methods: {
    handleSubmit() {
      const lightApp = clone(this.lightApp);
      delete lightApp._id;
      delete lightApp.__v;
      if(this.validateDataError(lightApp))return;
      const fetch = (fn) => {
        fn.then((res) => {
          if (fetchSuccess(res)) {
              const msg = this.isEdit ? '更新成功' : '创建成功';
              this.$toast.success(msg);
              if(!this.isEdit){
                this.$router.push({ name: 'lightApp' });
              }
            }
        });
      };

      if (this.isEdit) {
        fetch(updateLightAppById(this.$route.params.id, lightApp));
      } else {
        fetch(saveLightApp(lightApp));
      }
    },
    validateDataError(lightApp){
      const plsName = '请输入轻应用名称';
      if(lightApp.name.length == 0){
        this.$toast.warning(plsName);
        return true;
      }
    },
    handleOpenApiExample(){
      this.$refs.apiExample.open({
        appId: this.lightApp.appId
      })
    }
  },
  components: {
    [ApiExample.name]: ApiExample,
  },
};
</script>

<style lang="less">
@import '~@/styles/__var.less';

.atd-add-attendance-group {
    &__header {
        width: 100%;
        margin-bottom: 20px;
    }
    &__container {
        padding: 30px 40px;
        border: @border-base;
        color: #666666;
        .employee-list, .schedule-list {
          float: left;
          padding-left: 5px;
          padding-top: 5px;
          border-radius: @border-radius-base;
          border: @border-base;
          border-color: #bfcbd9;
          cursor: pointer;
          &:hover {
            border-color: #8d9baf;
          }
          .v-tag {
            margin-bottom: 5px;
            margin-right: 5px;
            float: left;
          }
        }
    }
    .add-block {
        margin-bottom: 10px;
    }
    .help-link{
      color: @blue;
      cursor: pointer;
      text-decoration: underline;
      margin-right: 10px;
    }
}

.close-btn-notshow .v-modal__close {
    display: none;
}
</style>
